﻿<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>超市账单管理系统</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/public.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css"/>

    <script src="${pageContext.request.contextPath}/js/jquery.js"></script>
    <script src="${pageContext.request.contextPath}/js/js.js"></script>
    <script src="${pageContext.request.contextPath}/js/time.js"></script>




    <script type="text/javascript">

        /*todo pageSize数据变更时，提交表单立即切换页面*/
        function myChange(obj) {
            //设置当前页面条目数
            $("#pageSize").val(obj.value)
            $("#pageNum").val(1)
            document.forms[0].submit()

        }

        /*todo pageNum数据变更时，提交表单立即切换页面*/
        function page(pageNum) {
            $("#pageNum").val(pageNum)
            document.forms[0].submit()
        }
    </script>
</head>
<body>
<!--头部-->
<header class="publicHeader" style="height: 60px">
    <h1>超市账单管理系统</h1>
    <div class="publicHeaderR">

        <%--todo 当前用户名回显--%>
        <p><span>下午好！</span><span style="color: #fff21b"> Admin</span> , 欢迎你！</p>

        <%--todo 返回登录页面--%>
        <a href="#">退出</a>
    </div>
</header>
<!--时间-->
<section class="publicTime" style="height: 60px">
    <span id="time">2015年1月1日 11:11  星期一</span>
    <a href="#">温馨提示：为了能正常浏览，请使用高版本浏览器！（IE10+）</a>
</section>
<!--主体内容-->
<section class="publicMian " style="height: 700px">
    <div class="left">
        <h2 class="leftH2"><span class="span1"></span>功能列表 <span></span></h2>
        <nav>
            <ul class="list">

                <%--todo 查询所有， 分页展示--%>
                <li id="active"><a href="${pageContext.request.contextPath}/manager/findByInfo.action">用户管理</a></li>

                <%--todo 查询所有， 分页展示--%>
                <li><a href="${pageContext.request.contextPath}/manager/logOut.action">退出系统</a></li>
            </ul>
        </nav>
    </div>
    <div class="right">
        <div class="location">
            <strong>你现在所在的位置是:</strong>
            <span>用户管理页面</span>
        </div>

        <%--todo 条件查询数据提交--%>
        <form id="formId" action="${pageContext.request.contextPath}/manager/findByInfo.action" method="post">
            <div class="search">
                <span>用户名：</span>
                <input type="text" name="username" value="${manager.username}" placeholder="请输入用户名"/>
                <span>性别：</span>
                <select name="sex" id="sex" style="width: 20%">
                    <option value="">--选择性别--</option>
                    <option value="男" ${manager.sex=='男' ? 'selected' : ''}>男</option>
                    <option value="女" ${manager.sex=='女' ? 'selected' : ''}>女</option>
                </select>
                <span>职务：</span>
                <select name="type" id="type" style="width: 20%">
                    <option value="">--选择职务--</option>
                    <option value="联席董事" ${manager.type=='联席董事' ? 'selected' : ''} >联席董事</option>
                    <option value="董事" ${manager.type=='董事' ? 'selected' : ''}>董事</option>
                    <option value="董事长" ${manager.type=='董事长' ? 'selected' : ''}>董事长</option>
                    <option value="总经理" ${manager.type=='总经理' ? 'selected' : ''}>总经理</option>
                    <option value="副总经理" ${manager.type=='副总经理' ? 'selected' : ''}>副总经理</option>
                    <option value="经理" ${manager.type=='经理' ? 'selected' : ''}>经理</option>
                </select>
                <input type="submit" style="width: 80px" value="查询"/>

                <%--todo 跳转至添加页面--%>
                <a href="#">添加用户</a>
            </div>
            <!--用户-->
            <table class="providerTable" cellpadding="1" cellspacing="0" bordercolor="gray" border="1" id="DataGrid1"
                   style="BORDER-RIGHT: gray 0px solid; BORDER-TOP: gray 1px solid; BORDER-LEFT: gray 1px solid; WIDTH: 100%; WORD-BREAK: break-all; BORDER-BOTTOM: gray 1px solid; BORDER-COLLAPSE: collapse; BACKGROUND-COLOR: #f5fafe; WORD-WRAP: break-word">
                <tr class="firstTr">
                    <th width="10%">用户编码</th>
                    <th width="20%">用户名称</th>
                    <th width="10%">性别</th>
                    <th width="10%">电话</th>
                    <th width="10%">职业</th>
                    <th width="30%">操作</th>
                </tr>

                <c:forEach items="${pageInfo.list}" var="manager">
                    <tr onmouseover="this.style.backgroundColor = '#F8DBF3'"
                        onmouseout="this.style.backgroundColor = '#F5FAFE';">
                        <td style="CURSOR: hand; HEIGHT: 50px" align="center" width="18%">
                            ${manager.userid}
                        </td>
                        <td style="CURSOR: hand; HEIGHT: 50px" align="center" width="18%">
                                ${manager.username}
                        </td>
                        <td style="CURSOR: hand; HEIGHT: 50px" align="center" width="18%">
                                ${manager.sex}
                        </td>
                        <td style="CURSOR: hand; HEIGHT: 50px" align="center" width="18%">
                                ${manager.phone}
                        </td>
                        <td style="CURSOR: hand; HEIGHT: 50px" align="center" width="18%">
                                ${manager.type}
                        </td>
                        <td>
                                <%--todo 跳转至编辑页面--%>
                            <a href="#"><img src="${pageContext.request.contextPath}/img/xiugai.png" alt="修改"
                                             title="修改"/></a>&nbsp;&nbsp;&nbsp;

                                <%--todo 删除功能实现--%>
                            <a href="#" class="removeUser"><img src="${pageContext.request.contextPath}/img/schu.png"
                                                                alt="删除" title="删除"/></a>
                        </td>
                    </tr>
                </c:forEach>

            </table>

            <input type="hidden" name="pageNum" id="pageNum" value="${pageInfo.pageNum}">
            <input type="hidden" name="pageSize" id="pageSize" value="${pageInfo.pageSize}">

        </form>
    </div>
</section>


<%--分页条--%>
<span>
    <h2>
    当前第${pageInfo.pageNum}页， 每页显示:&nbsp;&nbsp;<select onchange="myChange(this)" class="col-md-12"
                                                      style="width: 60px; height: 30px; font-size: 20px">
           <option value="1"  ${pageInfo.pageSize == 1 ? 'selected' : ''}>1</option>
           <option value="2"  ${pageInfo.pageSize == 2 ? 'selected' : ''}>2</option>
           <option value="5"  ${pageInfo.pageSize == 5 ? 'selected' : ''}>5</option>
           <option value="10" ${pageInfo.pageSize == 10 ? 'selected' : ''}>10</option>
    </select>&nbsp;&nbsp;条，

<div style="width:800px;margin: 20px auto 0;">
    <ul class="pagination" style="text-align:center; margin-top:10px;">
        <!--todo 当前页为第一页时，不显示首页和上一页-->
        <c:if test="${pageInfo.pageNum > 1 }">
            <a href="javascript:page(1)">首页</a>
            <a href="javascript:page(${pageInfo.prePage})">前一页</a>
        </c:if>

        <%--todo 遍历页码--%>

        <c:forEach begin="1" end="${pageInfo.pages}" var="i">
            <a href="">${i}</a>
        </c:forEach>
        <!--todo 当前页为最后一页时，不显示下一页和尾页-->

        <c:if test="${pageInfo.pageNum < pageInfo.pages}">
            <a href="javascript:page(${pageInfo.nextPage})">后一页</a>
            <a href="javascript:page(${pageInfo.pages})">尾页</a>
        </c:if>

    </ul>
</div>
    </h2>

</span>


<footer class="footer">
</footer>


</body>
</html>